<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" +
            request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>添加</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="<%=basePath%>static/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="<%=basePath%>static/css/font.css">
    <link rel="stylesheet" href="<%=basePath%>static/css/xadmin.css">
    <script type="text/javascript" src="<%=basePath%>static/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/xadmin.js"></script>
</head>

<body>
<div class="x-body">
    <form class="layui-form">
        <div class="layui-form-item">
            <label for="username" class="layui-form-label">
                <span class="x-red">*</span>登录名
            </label>
            <div class="layui-input-inline">
                <input type="text" id="username" name="username"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>登入名
            </div>
        </div>
        <xblock>
            <span class="x-right" style="line-height:40px" id="showTotal">共有数据：1 条</span>
        </xblock>
        <table class="layui-table">
            <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>医生</th>
                <th>病状</th>
                <th>体检</th>
                <th>预约时间</th>
                <th>回执</th>
            </tr>
            </thead>
            <tbody id="tab"></tbody>
            <%--<tr>
                <td colspan="8" align="center">
                    <ul class="pagination" id="pagination1"></ul>
                </td>
            </tr>--%>
        </table>
    </form>
</div>

<script>
    // 总页数
    var totalPages = 0;
    // 总条数
    var totalCounts = 0;
    // 当前页
    var currentPage = 0;
    // 页面加载完成就去执行此代码，主要目的就是加载按钮，以及当页面中pageNum发生变化时，去执行后台查询数据方法
    $(document).ready(function () {
        $("#username").val(localStorage.getItem("username"))
        // 第一次执行selectAllUser函数，用于初始化参数
        lookAppoint(-1)
    })

    function lookAppoint(n) {
        // ajax请求
        $.ajax({
            // 请求服务器的路径
            url: "../admin/lookAppoint",
            // 提交方式
            type: "post",
            // 服务器响应数据类型
            dataType: "json",
            // 此需求需要设置为同步请求
            async: false,
            // 发送给服务器的数据内容
            data: {
                "username":$("#username").val(),
            },//成功回调函数
            success: function (data) {
                // 显示数据条数
                $("#showTotal").text("共有数据：" + data.total + "条");
                // 获取用户数据
                let appointList = data.list;
                if (appointList.length > 0){
                    // 当数据库有用户数据的时候，进行初始化
                    if (n === -1) {
                        totalPages = data.pages;
                        totalCounts = data.total;
                        currentPage = data.pageNum;
                    }
                    // 定义一个空字符串，用来拼接用户数据信息
                    let str = '';
                    // 通过一个for循环，拼接用户数据
                    for (let i = 0; i < appointList.length; i++) {
                        str += "<tr>" +
                            "<td>" + appointList[i].appointId + "</td>" +
                            "<td>" + appointList[i].name + "</td>" +
                            "<td>" + appointList[i].age + "</td>" +
                            "<td>" + appointList[i].sex + "</td>" +
                            "<td>" + appointList[i].doctor + "</td>" +
                            "<td>" + appointList[i].symptom + "</td>" +
                            "<td>" + appointList[i].state + "</td>" +
                            "<td>" + appointList[i].appointmentDate + "</td>" +
                            "<td>" + appointList[i].feedback + "</td>"
                    }
                    // 把拼接好的用户数据信息字符串str，通过jQuery方法html()，填充在页面tbody中
                    $("#tab").html(str);
                }else {
                    // 当数据库没有用户数据的时候，进行初始化
                    totalPages = 1;
                    totalCounts = 1;
                    currentPage = 1;
                    $("#tab").html("<tr><td colspan='8' align='center'>没有用户数据，请添加</td></tr>")
                }

            },// 失败回调
            error: function () {
                alert("服务器错误");
            }
        })
    }
</script>
</body>

</html>